'use client'
import Link from 'next/link'
import Image from 'next/image'
import styles from './index.module.css'
import { Tab, Tabs } from 'react-bootstrap'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import MainNewsImg from '@/app/assets/images/mainNews.png'
import NewsImg2 from '@/app/assets/images/news2.jpg'


interface NewsItemData {
  src: any,
  title: string,
  attr: string
}

const News = () => {
  const [news, setNews] = useState<NewsItemData[]>([])

  useEffect(() => {
    getNewsList()
  }, [])

  async function getNewsList() {
    const { props } = await getStaticProps();
    setNews(props.newsList);
  }

  function renderNewsItem(item: NewsItemData, index: number) {
    const { src, title, attr } = item;
    return (
      <div className={classNames('flex p-2 text-sm', styles.newsItem)} key={index}>
        <div className='h-[100px] w-[150px] overflow-hidden'>
          <Image src={src} alt={title} style={{height: '100px', width: '150px'}} />
        </div>
        <div className='ml-4'>
          <h4 className='text-sm'>{title}</h4>
          <p className='text-xs text-gray-400 overflow-hidden w-[360px]'>{attr}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="flex justify-center">
      <div className="max-w-screen-xl flex flex-col w-[1200px] justify-center items-center">
        <div className="h-[178px] flex flex-col items-center justify-center">
          <h4>新闻资讯</h4>
          <p>News</p>
        </div>
        <div className="flex w-full">
          <div className="flex-1 bg-gray-100 p-10">
            <div className='flex justify-between'>
              <div className="field-title">公司新闻<span className='text-xs ml-2 text-gray-400'>/Company news</span></div>
              <Link href={'/ll'} className='text-gray-400 hover:text-red-400'>更多</Link>
            </div>
            <Image src={MainNewsImg} className='mt-6' alt='强强联合 | 首厚智能与广联达签署战略合' />
            <div className='mt-4 text-sm'>
              <h4 className='text-base'>强强联合 | 首厚智能与广联达签署战略合</h4>
              <p className='text-gray-400'>
              4月21日，重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）与广联达科技股份有限公司（以下简称“广联达”）在广联达重庆分公司签署战略合作协议。广联达西南大区施工业务总经理武煜晖、重庆区域施工业务总经理闫玉龙、销售总监张萍、市场总监欧小玲、民企部总监李建宏、售前咨询师董怡，西藏天路股份有限公司党委副书记、重庆重交再生资源开发股份有限公司董事长达瓦扎西，首厚智能董事长陈俊、总经理卞曙刚、副总经理黄萍、技术总监张彬彬出席签约现场，双方进行了深入交流，并共同见证双方战略合作协议的签署。
              </p>
            </div>
          </div>
          <div className="flex-1">
            <Tabs
              defaultActiveKey="news"
              id="uncontrolled-tab-example"
              className="mb-3"
            >
              <Tab eventKey="news" title="公司新闻" className='animate__backInUp'>
                {
                  news.map((item, index) => renderNewsItem(item, index) )
                }
                <div className='pl-4 pr-4'>
                  <Link href={'/dashboard'} className='flex justify-center items-center h-[40px] bg-gray-100 text-gray-400 hover:text-red-400'>查看更多</Link>
                </div>
              </Tab>
              <Tab eventKey="profile" title="行业动态">
                {
                    news.map((item, index) => renderNewsItem(item, index) )
                  }
                <div className='pl-4 pr-4'>
                  <Link href={'/dashboard'} className='flex justify-center items-center h-[40px] bg-gray-100 text-gray-400 hover:text-red-400'>查看更多</Link>
                </div>
              </Tab>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}

export async function getStaticProps() {
  
  return {
    props: {
      newsList: [
        {
          src: NewsImg2,
          title: '凝心聚力 光创辉煌·首厚智能科技团建',
          attr: '阳光正暖，不负时光，一路向前，未来可期。凝心聚力，光创辉煌！'
        },
        {
          src: MainNewsImg,
          title: '强强联合 | 首厚智能与广联达签署战略合',
          attr: '4月21日，重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）与广联达科技股份有限公司（以下简称“广联达”）在广联达重庆分公司签署战略合作协议。广联达西南大'
        },
        {
          src: NewsImg2,
          title: '热烈庆祝公司首届董事会顺利召开',
          attr: '近日，在重庆重交再生资源开发股份有限公司（以下简称“重庆重交”）和重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）联合项目团队的共同努力下，双方公司正式签'
        },
        {
          src: NewsImg2,
          title: '巴南区疾控中心大规模核酸检测信息系统正式',
          attr: '2020年1月10日，巴南区疾病预防控制中心又一次迎来了大规模核酸检测任务。本次检测任务全程采用了由我司提供的大规模核酸检测信息系统。通过该系统实现了核酸检测工'
        }
      ]
    }
  }
}

export default News